<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
         ES6 的模块化开发(重点)
        + 把我们的完整功能, 拆开成为一个一个的独立功能(模块)
          => 一个 js 文件就是一个独立模块
        + 根据业务需求, 来进行模块整合 (提升)
        + 当模块化开发的时候
          => 我们需要把多个逻辑书写在多个 js 文件内
          => 此时, 每一个文件都是一个独立的文件, 都是一个独立的模块作用域(文件作用域)
          => 该文件内, 只能使用自己文件内的变量, 不能使用其他文件内的变量
        + 导出 / 导入
          => 导出: 在一个文件内向外暴露一些内容
          => 导入: 导入该文件的同时, 拿到它向外暴露的内容

      浏览器使用 ES6 模块化语法的要求
        + script 标签必须要有一个 type="module" 的属性
        + 页面必须要在服务器上打开(借助 live server)

      必须采用服务器方式打开的
      1. cookie 
      2. 模块化开发

      导出语法:
        + 语法1: export default 你要导出的数据(详见 header.js)
          => 一个文件只能导出一个 default 数据
        + 语法2: export 定义变量 = 值(详见 footer.js)
          => 一个文件可以导出多个新定义的变量

      导入语法:(详见 index.js)
        + 语法1: import 变量 from '文件'   //这里是文件的路径
          => 这个语法必须对应导出语法1
        + 语法2: import { 导出的内容 } from '文件' //这里是文件的路径
          => 这个语法必须对应导出语法2
        
        
        
        
        */
    </script>
</body>
</html>